<template>
  <div class="brand-title">
    <div class="line"></div>
    <div class="title">{{ title }}</div>
    <div class="line"></div>
  </div>

  <div class="scroll-container">
    <GoodsItem v-for="item in 8" @click="itemClick" />
    <div class="more-item" @click="moreClick">
      <div style="display: flex; flex-direction: column">
        <div style="width: 80px">- 更多 -</div>
        <div style="width: 80px">MORE..</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import GoodsItem from "@/views/category/components/GoodsItem.vue";

defineProps({
  title: {
    type: String,
    default: "品牌",
  },
});

const emit = defineEmits(["clickmore", "clickitem"]);

// 点击更多
const moreClick = () => {
  console.log("---------点击更多----------");
  emit("clickmore", "1111");
};

// 点击item
const itemClick = () => {
  console.log("---------点击item----------");
  emit("clickitem", "22222");
};
</script>

<style lang="scss" scoped>
.brand-title {
  display: flex;
  height: 32px;
  align-items: center;
  // 容器内元素水平布局
  justify-content: center;
  margin-top: 16px;
  text-align: center;
  .title {
    width: 60px;
    line-height: 100%;
    margin-right: 4px;
    margin-left: 4px;
  }
  .line {
    height: 1px;
    // flex: auto;
    width: 1rem;
    background-color: #666666;
  }
}

.scroll-container {
  width: 100vw;
  display: flex;
  overflow-x: auto;
  // flex-direction: row;

  .more-item {
    display: flex;
    text-align: center;
    align-items: center;
  }
}

/* 如果想要隐藏滚动条，则可以使用下面的CSS样式 */
.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome、Safari等WebKit内核的浏览器 */
}

.scroll-container {
  -ms-overflow-style: none; /* IE10+浏览器 */
}
</style>
